<template>
  <div id="app" :class="{ 'big-screen': bigScreen }" @contextmenu.prevent>
    <template v-if="webSocketToken">
      <!-- 页眉 -->
      <header-page></header-page>
      <!-- aside && main -->
      <el-container class="el-container">
        <!-- aside -->
        <aside-page ref="userAside"></aside-page>
        <!-- main -->
        <router-view name="main"></router-view>
      </el-container>
    </template>
    <!-- 管理端 -->
    <template v-else-if="httpToken">
      <router-view name="admin"></router-view>
    </template>
    <!-- 登录页面 -->
    <template v-else>
      <router-view name="login"></router-view>
    </template>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import HeaderPage from '@/components/HeaderPage.vue'
import AsidePage from '@/components/AsidePage.vue'

import { createWebSocket, closeWebsocket } from './websocket/websocket.js'
import { HeartBeatReq } from './api/webSocketApi'

export default {
  name: 'App',
  components: {
    HeaderPage,
    AsidePage
  },
  data() {
    return {
      heartTimer: null // 心跳检测
    }
  },
  computed: {
    ...mapState({
      bigScreen: 'bigScreen',
      webSocketState: 'webSocketState',
      webSocketToken: 'webSocketToken',
      httpToken: 'httpToken',
      currentMode: 'currentMode'
    })
  },
  watch: {
    // 监听websocket的状态
    webSocketState(val) {
      switch (val) {
        case 0:
          console.log('正在建立连接，还没有完成 默认值')
          break
        case 1:
          console.log('websocket连接成功')
          break
        case 2:
          console.log('连接正在进行关闭握手，即将关闭')
          break
        case 3:
          console.log('连接已经关闭或者根本没有建立')
          // clearInterval(this.heartTimer)
          // this.heartTimer = null
          if (this.webSocketToken) {
            this.$alert('连接已经关闭, 请重新登录！', '提示', {
              showClose: false,
              closeOnClickModal: false,
              confirmButtonText: '确定',
              type: 'warning'
            })
              .then(() => {
                // 清空websocketToken
                this.$store.commit('SET_WEBSOCKET_TOKEN', '')
              })
              .catch(() => {})
          }
          break
        default:
          break
      }
    },
    // 监听token
    webSocketToken(newToken) {
      if (newToken === '') {
        clearInterval(this.heartTimer)
        this.heartTimer = null
      }
      if (newToken) {
        // 清除自动登录的定时器
        // clearInterval(this.loginTimer)
        // this.loginTimer = null
        // 发送心跳
        this.heartTimer = setInterval(() => {
          HeartBeatReq(newToken)
          console.log('发送心跳', new Date().toLocaleString())
        }, 30000)
        // 默认选中第一个
        // if (this.onLineDevices.length > 0) {
        //   this.$refs.userAside.choseDevice(this.onLineDevices[0])
        // }
        // this.loadingMsg = ''
      } else {
        // 转到登录页面
        this.$router.replace({ name: 'login' })
        // 如果是electron 调整窗口大小
        if (this.currentMode === 'electron') {
          // 退出登录的loading
          const loading = this.$loading({
            lock: true,
            text: '正在退出',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          setTimeout(() => {
            loading.close()
          }, 2000)
          // 调整窗口大小
          // this.$ipcRenderer.send('operations', 'logout')
          closeWebsocket()
          
          setTimeout(() => {
            const websocketUrl = localStorage.getItem('VUE_APP_WEBSOCKET_URL')
            createWebSocket(websocketUrl?websocketUrl:process.env.VUE_APP_WEBSOCKET_URL)
          }, 1000)
          // 数据重置
          this.$store.commit('conversation/RESET_DATA')
          this.$store.commit('nedb/RESET_CHATS')
        } else {
          // 重新加载页面
          window.location.reload()
        }
      }
    },
    // 监听管理端token
    httpToken(newToken) {
      if (newToken) {
        console.log('httpToken', newToken)
      } else {
        // 转到登录页面
        this.$router.replace({ name: 'login' })
        // 如果是electron 调整窗口大小
        if (this.currentMode === 'electron') {
          // 退出登录的loading
          const loading = this.$loading({
            lock: true,
            text: '正在退出',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          setTimeout(() => {
            loading.close()
          }, 2000)
          // 调整窗口大小
          // this.$ipcRenderer.send('operations', 'logout')
        } else {
          // 重新加载页面
          window.location.reload()
        }
      }
    }
  },
  mounted() {
    // 如过浏览器支持websocket 创建连接
    if ('WebSocket' in window) {
      const websocketUrl = localStorage.getItem('VUE_APP_WEBSOCKET_URL')
      createWebSocket(websocketUrl?websocketUrl:process.env.VUE_APP_WEBSOCKET_URL)
    } else {
      //  如果浏览器不支持WebSocket
      this.$message({
        message: '您的浏览器不支持 WebSocket!，请更换浏览器！',
        type: 'error'
      })
    }
  },
  methods:{
    gouser(me){
      this.$refs.userAside.findChoseWechat(me);
    },
  },
  destroyed() {
    // 离开页面摧毁定时器
    clearInterval(this.heartTimer)
    this.heartTimer = null
  }
}
</script>

<style lang="scss">
@import './styles/reset.scss';
@import './styles/normalize.scss';
@import './styles/common.scss';
@import './styles/my_element_ui.scss';
@import './styles/qqface.scss';
@import '~@/assets/iconfont/iconfont.css';
@import '~@/assets/font-awesome/css/font-awesome.css';

#app {
  font-size: $font-size-base;
  color: $color-common;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'SF UI Text', 'Helvetica Neue', STHeiti,
    'Microsoft Yahei', Tahoma, Simsun, sans-serif;
  overflow: hidden;
  width: 1205px;
  height: 717px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #fff;
  border: solid $border-color-base 1px;

  .el-container {
    flex: 1 1 auto;
    display: flex;
    overflow: hidden;
  }

  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
}
</style>
